<template>
  <div class="example-container">
    <h3>example</h3>
    <div>
      <slot name="com"/>
      <h3>code</h3>
      <pre>
       <slot/>
      </pre>
      <template v-if="attributes.length">
        <TelAttris
          title=""
          :data="attributes"
        />
      </template>
      <template v-if="events.length">
        <TelEvent
          title=""
          :data="events"
        />
      </template>
      <template v-if="methods.length">
        <TelMethod
          title=""
          :data="methods"
        />
      </template></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { TelAttris, TelEvent, TelMethod } from './index'
import { Attribute, Event } from '../type'
export default defineComponent({
  components: {
    TelAttris,
    TelEvent,
    TelMethod
  },
  props: {
    attributes: {
      type: Array as PropType<Array<Attribute>>,
      default: () => []
    },
    events: {
      type: Array as PropType<Array<Event>>,
      default: () => []
    },
    methods: {
      type: Array as PropType<Array<Event>>,
      default: () => []
    }
  }
})
</script>
